"use client"
import React, { useEffect, useState } from 'react';
import { Table, Space, Input, Select, DatePicker, Button, Typography, Modal } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
import { RightCircleOutlined, ReloadOutlined, SearchOutlined, SortAscendingOutlined, InsertRowAboveOutlined, UploadOutlined } from '@ant-design/icons';
const { Text, Link } = Typography
import Myform from './myform';

type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
  id: number,
  typeId: string;
  title: string;
  address: string;
  price: string;
  type: number;
  createPeople: string;
  createTime: string;

}
const App: React.FC = () => {
  const columns: TableColumnsType<DataType> = [
    {
      title: '订单编号',
      dataIndex: 'typeId',

    },
    {
      title: '订单标题',
      dataIndex: 'title',
    },
    {
      title: '关联客户',
      dataIndex: 'address',
    },
    {
      title: '订单总金额',
      dataIndex: 'price',
    },
    {
      title: '审批类型',
      dataIndex: 'type',
      render: (type) => {
        return type == 1 ? <Text type="success">完成审批</Text> : <Text type="warning">等待审批</Text>
      }
    },
    {
      title: '创建人员',
      dataIndex: 'createPeople',
    },
    {
      title: '提交时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button type="primary" onClick={() => {
            showModal()
            setTitle('详情')
            setitemobj(record)
          }}><RightCircleOutlined />详情</Button>
        </Space>
      ),
    },
  ];

  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [filteredData, setFilteredData] = useState<DataType[]>([]); // 用于存储过滤后的数据
  const [searchKeyword, setSearchKeyword] = useState(''); // 搜索关键词
  const [selectedType, setSelectedType] = useState(''); // 选择的审批类型
  const [startDate, setStartDate] = useState<Date | null>(null); // 开始日期
  const [endDate, setEndDate] = useState<Date | null>(null); // 结束日期
  const [searchCreatePeople, setSearchCreatePeople] = useState(''); // 搜索的创建人员

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      {
        key: 'odd',
        text: 'SJ20190324010001',
        onSelect: (changeableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changeableRowKeys.filter((_, index) => {
            if (index % 2 == 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };

  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    setSelectedType(value);
  };
  const onChange = (date, dateString) => {
    console.log(date, dateString);
    if (date) {
      if (!startDate) {
        setStartDate(date);
      } else {
        setEndDate(date);
      }
    }
  }
  //详情弹框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const [title, setTitle] = useState('')
  const [itemobj, setitemobj] = useState({})
  const data: DataType[] = [
    {
      "id": 1,
      "typeId": "SJ20190324010001",
      "title": "订单标题1",
      "address": "北京市华恩科技集团",
      "price": "¥ 20,000.00",
      "type": 2,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 2,
      "typeId": "SJ20190324010001",
      "title": "订单标题",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小六",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 3,
      "typeId": "SJ20190324010001",
      "title": "订单标题2",
      "address": "北京市华恩科技集团",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 4,
      "typeId": "SJ20190324010001",
      "title": "订单标题3",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 9,000.00",
      "type": 2,
      "createPeople": "赵小五",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 5,
      "typeId": "SJ20190324010001",
      "title": "订单标题4",
      "address": "北京市华恩科技集团",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 6,
      "typeId": "SJ20190324010001",
      "title": "订单标题5",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 9,000.00",
      "type": 2,
      "createPeople": "赵小四",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 7,
      "typeId": "SJ20190324010001",
      "title": "订单标题5",
      "address": "北京市华恩科技集团",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 8,
      "typeId": "SJ20190324010001",
      "title": "订单标题4",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 9,000.00",
      "type": 2,
      "createPeople": "赵小二",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 9,
      "typeId": "SJ20190324010001",
      "title": "订单标题3",
      "address": "上海市恩亦科技公司",
      "price": "¥ 8,000.00",
      "type": 2,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 10,
      "typeId": "SJ20190324010001",
      "title": "订单标题2",
      "address": "上海市恩亦科技公司",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小二",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 11,
      "typeId": "SJ20190324010001",
      "title": "订单标题1",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 10,000.00",
      "type": 2,
      "createPeople": "赵小四",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 12,
      "typeId": "SJ20190324010001",
      "title": "订单标题",
      "address": "上海市恩亦科技公司",
      "price": "¥ 8,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 13,
      "typeId": "SJ20190324010001",
      "title": "订单标题1",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小六",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 14,
      "typeId": "SJ20190324010001",
      "title": "订单标题2",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 15,
      "typeId": "SJ20190324010001",
      "title": "订单标题3",
      "address": "上海市恩亦科技公司",
      "price": "¥ 20,000.00",
      "type": 1,
      "createPeople": "赵小五",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 16,
      "typeId": "SJ20190324010001",
      "title": "订单标题4",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 10,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 17,
      "typeId": "SJ20190324010001",
      "title": "订单标题5",
      "address": "深圳市亿恩科技有限公司",
      "price": "¥ 8,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    },
    {
      "id": 18,
      "typeId": "SJ20190324010001",
      "title": "订单标题",
      "address": "上海市恩亦科技公司",
      "price": "¥ 20,000.00",
      "type": 1,
      "createPeople": "赵小刚",
      "createTime": "2019-03-15 17:27"
    }
  ];
  //查询操作
  const handleSearch = () => {
    let filtered = data;
    // 根据搜索关键词过滤
    if (searchKeyword) {
      filtered = filtered.filter((item) => {
        return item.typeId.includes(searchKeyword) ||
          item.title.includes(searchKeyword) ||
          item.address.includes(searchKeyword) ||
          item.price.includes(searchKeyword) ||
          item.createPeople.includes(searchKeyword);
      });
    }
    // 根据选择的审批类型过滤
    if (selectedType) {
      const typeValue = selectedType === '完成审批' ? 1 : 2;
      filtered = filtered.filter((item:any) => item.type === typeValue);
    }
    // 根据日期范围过滤
    if (startDate && endDate) {
      filtered = filtered.filter((item) => {
        const itemDate = new Date(item.createTime);
        return itemDate >= startDate && itemDate <= endDate;
      });
    }
    // 根据搜索的创建人员过滤
    if (searchCreatePeople) {
      filtered = filtered.filter((item) => item.createPeople.includes(searchCreatePeople));
    }
    setFilteredData(filtered);
  };

  const handleReset = () => {
    setSearchKeyword('');
    setSelectedType('');
    setStartDate(null);
    setEndDate(null);
    setSearchCreatePeople('');
    setFilteredData(data);
  };

  return <div>
    <div style={{ marginBottom: '20px' }}>
      <Space>
        <Input
          placeholder="搜索关键词"
          style={{ width: '180px' }}
          value={searchKeyword}
          onChange={(e) => setSearchKeyword(e.target.value)}
        />
        <Select
          placeholder="审批类型"
          style={{ width: 180 }}
          onChange={handleChange}
          options={[
            { value: '等待审批', label: '等待审批' },
            { value: '完成审批', label: '完成审批' },
          ]}
        />
        <DatePicker
          placeholder="提交时间"
          onChange={onChange}
          value={startDate}
        />
        <DatePicker
          placeholder="创建时间"
          onChange={onChange}
          value={endDate}
        />
        <Input
          placeholder="创建人员"
          style={{ width: '180px' }}
          value={searchCreatePeople}
          onChange={(e) => setSearchCreatePeople(e.target.value)}
        />
        <Button type="primary" onClick={handleSearch}><SearchOutlined />查询</Button>
        <Button onClick={handleReset}><ReloadOutlined />重置</Button>
      </Space>
    </div>
    <div style={{ marginBottom: '20px' }}>
      <Space>
        <Button><UploadOutlined />导出</Button>
      </Space>
      <Space className="oredelist">
        <Button><SortAscendingOutlined />排序</Button>
        <Button><InsertRowAboveOutlined />列表</Button>
      </Space>

    </div>
    <Modal footer={null} title={title} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
      <Myform title={title} itemobj={itemobj} key={new Date().getTime()} />
    </Modal>
    <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={filteredData.length > 0 ? filteredData : data} rowKey="id"
      pagination={{ defaultPageSize: 9 }} />
  </div>
};

export default App;